<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>、
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 50px; /*图片与文字连接处间隙*/
				margin-bottom: 50px; /*图片与文字连接处间隙*/
			}
			p{
				font-size: 16px;   /* 页面默认字体尺寸 */
				 line-height: 20px; /* 浮动文字，行高无法设定 */
				 word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/1.png" alt="三娘" width="250px" height="250px">
		<p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsa voluptatum quae ad! Vel, possimus eum. Commodi, maiores est quisquam in corporis possimus beatae exercitationem veniam, expedita delectus deleniti. Eos? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos laboriosam deleniti nobis hic modi quis sunt totam iure accusantium laborum quod est, ex architecto? Repudiandae impedit voluptate laudantium ullam laborum?  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, nam quidem tenetur nemo voluptatum blanditiis odit aliquam accusantium perferendis rerum quo voluptatem expedita ea natus facilis necessitatibus quia at veniam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis unde velit, iure sint vel expedita perferendis voluptas perspiciatis officia qui repellendus a accusantium cum ex. Unde pariatur error odit id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed possimus ea dolore nisi exercitationem blanditiis? Earum facere fugit numquam nisi vitae reprehenderit voluptates nobis, at hic explicabo, illo enim rerum.</p>
	</body>
</html>